<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
    <div class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card">
        <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
            <!-- Logo -->
            <div class="w-12">
                <img src="assets/images/logo/logo.png">
            </div>

            <!-- Title -->
            <div class="mt-8 text-4xl font-extrabold tracking-tight leading-tight">Reset your password</div>
            <div class="mt-0.5 font-medium">Create a new password for your account</div>

            <!-- Alert -->
            <fuse-alert
                class="mt-8 -mb-4"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
                [type]="alert.type"
                [@shake]="alert.type === 'error'">
                {{alert.message}}
            </fuse-alert>

            <!-- Reset password form -->
            <form
                class="mt-8"
                [formGroup]="resetPasswordForm"
                #resetPasswordNgForm="ngForm">

                <!-- Password field -->
                <mat-form-field class="w-full">
                    <mat-label>Password</mat-label>
                    <input
                        id="password"
                        matInput
                        type="password"
                        [formControlName]="'password'"
                        #passwordField>
                    <button
                        mat-icon-button
                        type="button"
                        (click)="passwordField.type === 'password' ? passwordField.type = 'text' : passwordField.type = 'password'"
                        matSuffix>
                        <mat-icon
                            class="icon-size-5"
                            *ngIf="passwordField.type === 'password'"
                            [svgIcon]="'heroicons_solid:eye'"></mat-icon>
                        <mat-icon
                            class="icon-size-5"
                            *ngIf="passwordField.type === 'text'"
                            [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                    </button>
                    <mat-error>
                        Password is required
                    </mat-error>
                </mat-form-field>

                <!-- Password confirm field -->
                <mat-form-field class="w-full">
                    <mat-label>Password (Confirm)</mat-label>
                    <input
                        id="password-confirm"
                        matInput
                        type="password"
                        [formControlName]="'passwordConfirm'"
                        #passwordConfirmField>
                    <button
                        mat-icon-button
                        type="button"
                        (click)="passwordConfirmField.type === 'password' ? passwordConfirmField.type = 'text' : passwordConfirmField.type = 'password'"
                        matSuffix>
                        <mat-icon
                            class="icon-size-5"
                            *ngIf="passwordConfirmField.type === 'password'"
                            [svgIcon]="'heroicons_solid:eye'"></mat-icon>
                        <mat-icon
                            class="icon-size-5"
                            *ngIf="passwordConfirmField.type === 'text'"
                            [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                    </button>
                    <mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('required')">
                        Password confirmation is required
                    </mat-error>
                    <mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('mustMatch')">
                        Passwords must match
                    </mat-error>
                </mat-form-field>

                <!-- Submit button -->
                <button
                    class="fuse-mat-button-large w-full mt-3"
                    mat-flat-button
                    [color]="'primary'"
                    [disabled]="resetPasswordForm.disabled"
                    (click)="resetPassword()">
                    <span *ngIf="!resetPasswordForm.disabled">
                        Reset your password
                    </span>
                    <mat-progress-spinner
                        *ngIf="resetPasswordForm.disabled"
                        [diameter]="24"
                        [mode]="'indeterminate'"></mat-progress-spinner>
                </button>

                <!-- Form footer -->
                <div class="mt-8 text-md font-medium text-secondary">
                    <span>Return to</span>
                    <a
                        class="ml-1 text-primary-500 hover:underline"
                        [routerLink]="['/sign-in']">sign in
                    </a>
                </div>

            </form>
        </div>
    </div>
</div>
